import { ProFormGroup, ProFormText } from "@ant-design/pro-components";
import { Card } from "antd";
import styled from "styled-components";

interface UploadCardProps {
  fileName?: string;
  cardTitle?: string;
  formText: any;
}
const StyleUploadCard = styled(Card)`
  width: 50%;
  height: 100%;

  .ant-card-body {
    padding: 24px 40px 24px 40px;
    gap: 24px;
    border-radius: 12px 0px 0px 0px;
    opacity: 0px;
    background: #f6f6f6;
  }
`;

const UploadCard = (props: UploadCardProps) => {
  console.log(props?.formText, "props?.formText");
  return (
    <>
      {props?.cardTitle && (
        <StyleUploadCard
          style={{
            backgroundColor: "#F6F6F6",
            margin: "20px 0",
            width: "100%",
          }}
        >
          <div style={{ marginBottom: "10px" }}>{props.cardTitle}</div>
          <ProFormGroup>
            {props?.formText?.map((item: any, index: number) => {
              return (
                <ProFormText
                  key={index}
                  width="sm"
                  // disabled
                  name={[props.fileName, item?.textName]}
                  placeholder={"Please Enter"}
                  label={item?.name}
                  initialValue={item?.value}
                />
              );
            })}
          </ProFormGroup>
        </StyleUploadCard>
      )}
    </>
  );
};

export default UploadCard;
